<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><!--字符集是utf-8-->
    <title>算法对比</title>
    <style type="text/css">
        .mydiv_psnr {
            width: 600px;
            height: 500px;
            float: left;
            margin-left: 100px;
            /*background: rosybrown;*/
        }

        .mydiv_ssim {
            width: 600px;
            height: 500px;
            float: left;
            margin-left: 100px;
            /*background: rosybrown;*/
        }

        .mydiv_table {
            width: 400px;
            height: 250px;
            clear: both;
            margin-left: 500px;
            margin-top: 550px;
            /* background:lightpink; */
        }
    </style>
</head>
<body>

<div class="mydiv_psnr">
    <h3>PSNR：</h3>
    <svg id="mySVG" width="500px" height="500px" version="1.1"></svg>
    <script type="text/javascript">
        var mysvg = document.getElementById("mySVG");
        var rec = new Array();//定义一个新的数组
        var txt = new Array();//定义一个新的数组
        var txt_2 = new Array();


        rec[0] = document.createElement("rect");//创建标签rect
        txt[0] = document.createElement("text");//创建标签text
        txt_2[0] = document.createElement("text")
        mysvg.appendChild(rec[0]);
        mysvg.appendChild(txt[0]);
        mysvg.appendChild(txt_2[0]);
        // var h = Math.random() * 255;//定义高度
        var s = [[${AODNet_psnr}]];
        console.log(s)
        var h = parseFloat(s);
        var hh=h*12;
        console.log(h)

        var r = Math.floor(Math.random() * 255);//定义颜色,三原色随机搭配组合成颜色
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var name = "AOD"
        rec[0].outerHTML = "<rect x=" + 60 * 0 + " y=" + (400 - hh) + " width='50px' height=" + hh + " style='fill:rgb(" + r + "," + g + "," + b + ")'/>";//设置页面展示，还有填充色。
        txt[0].outerHTML = "<text x=" + (60 * 0 + 0) + " y=" + (400 - hh) + ">" + h + "</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
        txt_2[0].outerHTML = "<text x=" + (60 * 0 + 5) + " y=" + (420) + ">" + name + "</text>";


        rec[1] = document.createElement("rect");//创建标签rect
        txt[1] = document.createElement("text");//创建标签text
        txt_2[1] = document.createElement("text")
        mysvg.appendChild(rec[1]);
        mysvg.appendChild(txt[1]);
        mysvg.appendChild(txt_2[1]);
        // var h = Math.random() * 255;//定义高度
        // var s=document.getElementById("aodnet_psnr");
        var s = [[${GCANet_psnr}]];
        var h = parseFloat(s);
        var hh=h*12;
        var r = Math.floor(Math.random() * 255);//定义颜色,三原色随机搭配组合成颜色
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var name = "GCA"
        rec[1].outerHTML = "<rect x=" + 60 * 1 + " y=" + (400 - hh) + " width='50px' height=" + hh + " style='fill:rgb(" + r + "," + g + "," + b + ")'/>";//设置页面展示，还有填充色。
        txt[1].outerHTML = "<text x=" + (60 * 1 + 0) + " y=" + (400 - hh) + ">" + h + "</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
        txt_2[1].outerHTML = "<text x=" + (60 * 1 + 5) + " y=" + (420) + ">" + name + "</text>";


        rec[2] = document.createElement("rect");//创建标签rect
        txt[2] = document.createElement("text");//创建标签text
        txt_2[2] = document.createElement("text")
        mysvg.appendChild(rec[2]);
        mysvg.appendChild(txt[2]);
        mysvg.appendChild(txt_2[2]);
        var name = "FFA"
        // var h = Math.random() * 255;//定义高度
        // var s=document.getElementById("aodnet_psnr");
        var s = [[${FFA_psnr}]];
        var h = parseFloat(s);
        var hh=h*12;
        var r = Math.floor(Math.random() * 255);//定义颜色,三原色随机搭配组合成颜色
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        rec[2].outerHTML = "<rect x=" + 60 * 2 + " y=" + (400 - hh) + " width='50px' height=" + hh + " style='fill:rgb(" + r + "," + g + "," + b + ")'/>";//设置页面展示，还有填充色。
        txt[2].outerHTML = "<text x=" + (60 * 2 + 0) + " y=" + (400 - hh) + ">" + h + "</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
        txt_2[2].outerHTML = "<text x=" + (60 * 2 + 5) + " y=" + (420) + ">" + name + "</text>";
        // }
    </script>
</div>

<div class="mydiv_ssim">
    <h3>SSIM：</h3>
    <svg id="mySVG_2" width="500px" height="500px" version="1.1"></svg>
    <script type="text/javascript">
        var mysvg = document.getElementById("mySVG_2");
        var rec = new Array();//定义一个新的数组
        var txt = new Array();//定义一个新的数组
        var txt_2 = new Array();


        rec[0] = document.createElement("rect");//创建标签rect
        txt[0] = document.createElement("text");//创建标签text
        txt_2[0] = document.createElement("text")
        mysvg.appendChild(rec[0]);
        mysvg.appendChild(txt[0]);
        mysvg.appendChild(txt_2[0]);
        // var h = Math.random() * 255;//定义高度
        var s = [[${AODNet_ssim}]];
        console.log(s)
        var h = parseFloat(s);
        var hh=h*350;
        console.log(h)

        var r = Math.floor(Math.random() * 255);//定义颜色,三原色随机搭配组合成颜色
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var name = "AOD"
        rec[0].outerHTML = "<rect x=" + 60 * 0 + " y=" + (400 - hh) + " width='50px' height=" + hh + " style='fill:rgb(" + r + "," + g + "," + b + ")'/>";//设置页面展示，还有填充色。
        txt[0].outerHTML = "<text x=" + (60 * 0 + 0) + " y=" + (400 - hh) + ">" + h + "</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
        txt_2[0].outerHTML = "<text x=" + (60 * 0 + 5) + " y=" + (420) + ">" + name + "</text>";


        rec[1] = document.createElement("rect");//创建标签rect
        txt[1] = document.createElement("text");//创建标签text
        txt_2[1] = document.createElement("text")
        mysvg.appendChild(rec[1]);
        mysvg.appendChild(txt[1]);
        mysvg.appendChild(txt_2[1]);
        // var h = Math.random() * 255;//定义高度
        // var s=document.getElementById("aodnet_psnr");
        var s = [[${GCANet_ssim}]];
        var h = parseFloat(s);
        var hh=h*350;
        var r = Math.floor(Math.random() * 255);//定义颜色,三原色随机搭配组合成颜色
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var name = "GCA"
        rec[1].outerHTML = "<rect x=" + 60 * 1 + " y=" + (400 - hh) + " width='50px' height=" + hh + " style='fill:rgb(" + r + "," + g + "," + b + ")'/>";//设置页面展示，还有填充色。
        txt[1].outerHTML = "<text x=" + (60 * 1 + 0) + " y=" + (400 - hh) + ">" + h + "</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
        txt_2[1].outerHTML = "<text x=" + (60 * 1 + 5) + " y=" + (420) + ">" + name + "</text>";


        rec[2] = document.createElement("rect");//创建标签rect
        txt[2] = document.createElement("text");//创建标签text
        txt_2[2] = document.createElement("text")
        mysvg.appendChild(rec[2]);
        mysvg.appendChild(txt[2]);
        mysvg.appendChild(txt_2[2]);
        var name = "FFA"
        // var h = Math.random() * 255;//定义高度
        // var s=document.getElementById("aodnet_psnr");
        var s = [[${FFA_ssim}]];
        var h = parseFloat(s);
        var hh=h*350;
        var r = Math.floor(Math.random() * 255);//定义颜色,三原色随机搭配组合成颜色
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        rec[2].outerHTML = "<rect x=" + 60 * 2 + " y=" + (400 - hh) + " width='50px' height=" + hh + " style='fill:rgb(" + r + "," + g + "," + b + ")'/>";//设置页面展示，还有填充色。
        txt[2].outerHTML = "<text x=" + (60 * 2 + 0) + " y=" + (400 - hh) + ">" + h + "</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
        txt_2[2].outerHTML = "<text x=" + (60 * 2 + 5) + " y=" + (420) + ">" + name + "</text>";


        // }
    </script>
</div>


<br>
<div class="mydiv_table">
	<h4>PSNR与SSIM指标对比</h4>
    <table border="1" style="width:400px ;height: 200px;">
        <tr>
            <th></th>
            <th>PSNR</th>
            <th>SSIM</th>
        </tr>
        <tr>
            <td>AODNet</td>
            <td th:text="${AODNet_psnr}">null</td>
            <td th:text="${AODNet_ssim}">null</td>
        </tr>
        <tr>
            <td>GCANet</td>
            <td th:text="${GCANet_psnr}">null</td>
            <td th:text="${GCANet_ssim}">null</td>
        </tr>
        <tr>
            <td>FFA</td>
            <td th:text="${FFA_psnr}">null</td>
            <td th:text="${FFA_ssim}">null</td>
        </tr>
    </table>
</div>

<div style="margin-left: 400px;margin-top: 200px;">
	<font size="5">从左至右，依次为"合成的有雾图像"，"去雾后的图像"，"原始清晰图像"</font>
</div>


<div>
    <div >
		<br>
        <h3>AOD_Net：</h3>
		<div style="height: 500px;width: 100%;">
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_h}}" height="500px" width="500px"/>
			</div>
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_A}}" height="500px" width="500px"/>
			</div>
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_clear}}" height="500px" width="500px"/>
			</div>
		</div>
		<div style="height: 200px;width: 200px;hemargin-top: 20px;margin-left: 600px;">
			<h4>运行时间(s)：</h4>
			  <h4 th:text="${time_A}"></h4>
			  <br>
		</div>
    </div>

    <!--<br>-->
    <div >
		<br><br><br>
        <h3>GCANet：</h3>
		<div style="height: 500px;width: 100%;">
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_h}}" height="500px" width="500px"/>
			</div>
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_G}}" height="500px" width="500px"/>
			</div>
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_clear}}" height="500px" width="500px"/>
			</div>
		</div>
		<div style="height: 200px;width: 200px;hemargin-top: 60px;margin-left: 600px;">
			<h4>运行时间(s)：</h4>
			  <h4 th:text="${time_G}"></h4>
		</div>
    </div>

    <!--<br>-->

    <div>
		<br><br><br>
        <h3>FFA：</h3>
		<div style="height: 500px;width: 100%;">
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_h}}" height="500px" width="500px"/>
			</div>
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_F}}" height="500px" width="500px"/>
			</div>
			<div style="float: left;">
				<img th:src="@{'data:img/png;base64,'+${img_clear}}" height="500px" width="500px"/>
			</div>
		</div>
		<div style="height: 200px;width: 200px;hemargin-top: 60px;margin-left: 600px;">
			<h4>运行时间(s)：</h4>
			  <h4 th:text="${time_F}"></h4>
		</div>
        
    </div>

</div>


<!--<br>-->


</body>
</html>
